<template>
  <view class="xy-goods-row">
    <view class="item" @tap="onLink(item.id)">
      <view class="image"><image mode="widthFix" :src="item.image"/></view>
      <view class="r">
        <view class="name">{{item.title}}</view>
        <view class="flex just-sb ali-cen m-t-20">
          <view class="tm2">￥{{item.price}}</view>
          <view class="yz-iconfont yz-tianjia tm3 ts-40" @click.stop="addCart(item)"></view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "xyGoodsRow3",
  props: {
    item: {
      type: Object,
    }
  },
  data() {
    return {

    };
  },
  methods: {
    async onLink(id) {
      this.$Router.push({
        path: '/pages/shop/detail',
        query: {id: id},
      });
    },
    addCart(item) {
      console.log(item);
      this.$emit('addCart', item);
    }
  }
}
</script>
<style lang="scss">
.xy-goods-row {
  .item {
    display: flex;
    color: $font-color;
    flex-wrap: nowrap;
    text-align: left;
    padding: 20rpx 10rpx;

    .image {
      flex-shrink: 0;
      width: 120rpx;
      height: 120rpx;
      overflow: hidden;
      display: flex;
      align-items: center;

      image {
        width: 120rpx;
        border-radius: 12rpx;
      }
    }

    .r {
      flex-grow: 1;
      margin-left: 24rpx;

      .name {
        font-size: 25rpx;
      }

    }

  }
}
</style>
